<template>
    <div class="components-container">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>   
            <el-form class="formInline" label-width="90px" slot="form">  
                <el-row> 
                    <el-col :span="8">
                        <el-button @click="thisMonth">本月</el-button>
                        <el-button @click="lastMonth">上月</el-button>
                        <el-button @click="checkAll">查看全部</el-button>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="申请日期："> 
                            <el-col :span="11">
                                <el-date-picker v-model="startDate" :editable="false" type="date" placeholder="选择开始日期" :picker-options="pickerOptions1" @change="dateChange1" style="width:100%">
                                </el-date-picker>
                            </el-col>
                            <el-col :span="2" align="center">至</el-col>
                            <el-col :span="11">
                                <el-date-picker v-model="endDate" :editable="false" type="date" placeholder="选择结束日期" :picker-options="pickerOptions2"  @change="dateChange2" style="width:100%">
                                </el-date-picker>
                            </el-col>             
                        </el-form-item>
                    </el-col>
                </el-row>    
            </el-form>
            <div class="table-title" slot="table-title">
            </div>
            <el-table ref="singleTable" :data="dataApply" style="width:100%" border @selection-change="handleSelectionChange" v-loading="loading">
                                    
                <el-table-column label="申请日期" align="center">
                    <template scope="scope">
                        <span>{{scope.row.createTime || '--'}}</span>
                    </template> 
                </el-table-column>

                <el-table-column label="结算区间" align="center" min-width="120">
                    <template scope="scope">
                        <span>{{scope.row.intervalStartTime+' ~ '+scope.row.intervalEndTime}}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="money"  label="结算金额" align="center">
                    <template scope="scope">
                        <span>{{scope.row.money.toFixed(2)}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="结算银行卡开户名" align="center">
                    <template scope="scope">
                        <span>{{scope.row.accountName || '--'}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column label="所属银行" align="center">
                    <template scope="scope">
                        <span>{{scope.row.bank || '--'}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="银行卡号" align="center">
                    <template scope="scope">
                        <span>{{scope.row.bankCard || '--'}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="处理结果" align="center">
                    <template scope="scope">
                        <span>{{scope.row.status || '--'}}</span>
                    </template>
                </el-table-column>

                <!-- <el-table-column label="完成时间" align="center">
                    <template scope="scope">
                        <span>{{scope.row.finishTime || ''}}</span>
                    </template>
                </el-table-column> 测试要改5/30-->
                <el-table-column label="操作" align="left" width="100">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="goToReviseRole(scope.row)">查看明细</el-button>
                    </template>
                </el-table-column>                           
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>            
        </TableLayout>    
  </div>
</template>
 
<script>
import { pageSettleRecord } from 'api/accountMangement';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions } from 'vuex';
import { mapGetters } from 'vuex';
import moment from 'moment';
import startDate from 'components/datepicker/startDate';
import endDate from 'components/datepicker/endDate';
export default{
    components: { TableLayout, startDate, endDate},
    data() {
        return {
            startDate: '',
            endDate: '',
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            pickerOptions2: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            status: '',
            dataRange: '',
            dataApply: [],
            loading: true,
            listQuery: {// 分页
                page: 1,
                total: 0
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid'
        ])
    },
    created() {
        this.searchFetchData()
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        dateChange1(date) {
            if (this.endDate != '' && this.startDate) {
                this.searchFetchData();
            }
            this.pickerOptions2 = {
                disabledDate(time) {
                    return time.getTime() < new Date(date).getTime() - 864e5 || time.getTime() > Date.now();
                }
            }
        },
        dateChange2(date) {
            if (this.endDate != '' && this.startDate) {
                this.searchFetchData();
            }
            this.pickerOptions1 = {
                disabledDate(time) {
                    return time.getTime() > new Date(date).getTime() || time.getTime() > Date.now();
                }
            }
        },

        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {      
            this.listQuery.page = val;
            this.searchFetchData();
        },
        searchFetchData() {
            this.loading = true;
            if (this.startDate == undefined) {
                this.startDate = '';
            }
            if (this.endDate == undefined) {
                this.endDate = '';
            }
            let startDate = this.startDate== '' ? '':moment(this.startDate).format('YYYY-MM-DD') + ' 00:00:00';
            let endDate = this.endDate== '' ? '':moment(this.endDate).format('YYYY-MM-DD') + ' 23:59:59';
            pageSettleRecord(this.listQuery.page, this.config.pageSize, startDate, endDate).then(response => {
                this.dataApply = response.data.content.list;
                this.listQuery.total = response.data.content.pagination.total;
                this.loading = false;
            });
        },
        thisMonth() {
            const day = new Date();
            const daycount = day.getDate();
            const month = day.getMonth() + 1;
            const year = day.getFullYear();
            const startTime = year + '-' + month + '-1';
            const endTime = year + '-' + month + '-' + daycount;
            this.startDate = new Date(startTime);
            this.endDate = new Date(endTime);
            this.listQuery.page = 1;
        },
        lastMonth() {
            let day = new Date();
            let month = day.getMonth();
            let year = day.getFullYear();
            if (month == 0) {
                month = 12;
                year = year - 1
            }
            let daycount = new Date(year, month, 0).getDate();
            let startTime = year + '-' + month + '-1';
            let endTime = year + '-' + month + '-' + daycount;
            this.startDate = new Date(startTime);
            this.endDate = new Date(endTime);
            this.listQuery.page = 1;
        },
        checkAll() {
            this.startDate = '';
            this.endDate = '';
            this.searchFetchData();
            this.listQuery.page = 1;
        },
        goToReviseRole(row) {
            let status = row.status==null ? '' : row.status;
            let createTime = row.createTime==null ? '--' : row.createTime;
            let accountName = row.accountName==null ? '--' : row.accountName;
            let bankCard = row.bankCard==null ? '--' : row.bankCard;
            let bank = row.bank==null ? '--' : row.bank;
            let openBankName = row.openBankName==null ? '--' : row.openBankName;
            let phone = row.phone==null ? '--' : row.phone;
            let recheckReject = row.recheckReject==null ? '--' : row.recheckReject;
            let str = `${row.pId};${createTime};${accountName};${bankCard};${bank};${openBankName};${phone};${status};${recheckReject} `
            this.$router.push({
                path: `checkDetails/${str}`
            });
        }
    }
}
</script>
 
<style scoped>
.components-container{
   width:100%;
   margin:20px 0;
}
.block{
    padding-bottom:10px;
}
.el-row{
  background:#fff; 
  line-height:32px;
  border-radius:3px;
  
}
 
</style>